<script lang="ts" setup>
import { NTooltip, NIcon } from "naive-ui";
import type { Component, PropType } from "vue";

interface TipIconProps {
  icon: PropType<Component>;
  tip: string;
  size?: number;
}

withDefaults(defineProps<TipIconProps>(), {
  size: 20,
});

const emits = defineEmits(["onClick"]);
</script>

<template>
  <NTooltip placement="bottom" trigger="hover">
    <template #trigger>
      <NIcon :size="size" class="cursor-pointer" @click="emits('onClick')">
        <component :is="icon" />
      </NIcon>
    </template>
    <span> {{ tip }} </span>
  </NTooltip>
</template>
